<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情</title>
    <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/global.css">
  <link rel="stylesheet" href="./css/common.css">
  <!-- 引入放大镜插件的css -->
  <link rel="stylesheet" href="./css/magnifier.css">
  <!-- 引入当前文件的css -->
  <link rel="stylesheet" href="./css/productDetails.css">
</head>

<body>
    <!-- 头部 -->
    <div class="head">
        <div class="top">
            <div class="topLink fr fs14 ">
                <span>欢迎光临</span>
                <a href="./homePage.html">乐购</a>
                <span>，请</span>
                <a href="./login.html">登录</a>
                <span>/</span>
                <a href="./register.html">注册</a>
            </div>
        </div>
        <div class="wrapper searchBar">
            <div class="fr bar fs16">
                <input type="text" class="search-box fl" placeholder="创意文具">
                <input type="button" class="search-btn fl ">
                <a href="./shoppingTrolley.html" class="shoppingCart">
                    <span></span>
                    购物车
                </a>
                <a href="./shoppingTrolley.html" class="orderForm">我的订单</a>
            </div>
        </div>
    </div>
    <!-- 顶部链接和logo -->
    <div class="main wrapper">
        <div class="navTop">
            <img src="./imgs/02-产品列表_02.jpg">
            <ul class="navText">
                <li><a>图书</a></li>
                <li><a>电子书</a></li>
                <li><a>原创文学</a></li>
                <li><a>服装</a></li>
                <li><a>运动户外</a></li>
                <li><a>孕婴童</a></li>
                <li><a>家居</a></li>
                <li><a>创意文具</a></li>
                <li><a>地方特产</a></li>
                <li><a>海外购</a></li>
                <li><a>电器城</a></li>
            </ul>
        </div>
    </div>
    <!-- 图书详情 -->
    <div class="bookDetail">
        <p class="title wrapper pt20"><span class="fs24 fw_b">图书</span> &nbsp;> &nbsp;;<a href="#"
                class="fs14">小说</a>&nbsp; > &nbsp;<a href="#" class="fs14">情感/家庭/婚姻</a>&nbsp; > &nbsp;<a href="#"
                class="fs14">博集天卷</a> &nbsp;> &nbsp;<a href="#" class="fs14">她和他</a></p>
        <!-- 放大镜区域 -->
        <div class="wrapper magnifier-area bd clearfix" style="height: 512px;">
            <div class="leftbox fl bd magnifier" id="magnifier1">
                <div class="magnifier-container">
                    <!--当前图片显示容器-->
                    <div class="images-cover"></div>
                    <!--跟随鼠标移动的盒子-->
                    <div class="move-view"></div>
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/素材图片/书籍/22616096-1_l.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/素材图片/书籍/22616096-1_l.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/素材图片/书籍/22616096-1_l.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/素材图片/书籍/22616096-1_l.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="./imgs/素材图片/书籍/22616096-1_l.jpg" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
                <!--经过放大的图片显示容器-->
            </div>
            <div class="rightbox fr bd"></div>
        </div>

        <div class="bookSale wrapper">
            <h3>人气单品</h3>
            <div class="ebook bt clearfix">
                <div class="commonBook">
                    <p><img src="./imgs/素材图片/书籍/22935553-1_l.jpg" alt=""></p>
                    <p><img src="./imgs/02-产品列表_03.jpg" alt=""></p>
                    <p class="fs14 pl10">白夜行 东野圭吾</p>
                    <p class="pl10"><img src="./imgs/02-产品列表_07.jpg" alt=""></p>
                    <p class="pl10"><span class="color_r fs24">￥38</span> <span class="fs24 color_g">￥58</span></p>
                </div>
                <script>
                    for (let i = 0; i < 4; i++) {
                        document.write(
                            ` <div class="ml37 commonBook">
                <p><img src="./imgs/素材图片/书籍/22935553-1_l.jpg" alt=""></p>
                <p><img src="./imgs/02-产品列表_03.jpg" alt=""></p>
                <p class="fs14 pl10">白夜行 东野圭吾</p>
                <p class="pl10"><img src="./imgs/02-产品列表_07.jpg" alt=""></p>
                <p class="pl10"><span class="color_r fs24">￥38</span> <span class="fs24 color_g">￥58</span></p>
            </div>
                        `
                        );
                    }
                </script>
            </div>
            <div class="bookDetails fl">
                <div class="leftBox ml10">
                    <h4>看了又看</h4>
                    <ul>
                        <li>
                            <div class="commonBook">
                                <p><img src="./imgs/素材图片/书籍/22935553-1_l.jpg" alt=""></p>
                                <p><img src="./imgs/02-产品列表_03.jpg" alt=""></p>
                                <p class="fs14 pl10">白夜行 东野圭吾</p>
                                <p class="pl10"><img src="./imgs/02-产品列表_07.jpg" alt=""></p>
                                <p class="pl10"><span class="color_r fs24">￥38</span> <span
                                        class="fs24 color_g">￥58</span></p>
                            </div>
                        </li>
                        <script>
                            for (let i = 0; i < 6; i++) {
                                document.write(
                                    ` <li>
                        <div class="commonBook bt_g">
                            <p><img src="./imgs/素材图片/书籍/22935553-1_l.jpg" alt=""></p>
                            <p><img src="./imgs/02-产品列表_03.jpg" alt=""></p>
                            <p class="fs14 pl10">白夜行 东野圭吾</p>
                            <p class="pl10"><img src="./imgs/02-产品列表_07.jpg" alt=""></p>
                            <p class="pl10"><span class="color_r fs24">￥38</span> <span class="fs24 color_g">￥58</span></p>
                        </div>
                    </li>
                    `
                                );
                            }
                        </script>
                    </ul>
                </div>
                <div class="rightBox">

                </div>
            </div>
        </div>




        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="wrapper bigImg">
            <img src="./imgs/11-会员中心（首页）_28.jpg" alt="">
        </div>



        <!-- 尾部 -->
        <footer>
            <div class="footTop">
                <div class="wrapper">
                    <div class="pics">
                        <img src="./imgs/222_11.png" alt="">
                        <img src="./imgs/222_13(1).png" alt="">
                        <img src="./imgs/222_15.png" alt="">
                        <img src="./imgs/222_17.png" alt="">
                    </div>
                </div>
            </div>
            <div class="wrapper service clearfix">
                <ul class="fl">
                    <li class="title"><a href="#"> 购物指南</a></li>
                    <li><a href="#"> 购物流程</a></li>
                    <li><a href="#"> 发票制度</a></li>
                    <li><a href="#"> 账户管理</a></li>
                    <li><a href="#"> 会员优惠</a></li>
                </ul>
                <ul class="fl">
                    <li class="title"><a href="#"> 支付方式</a></li>
                    <li><a href="#"> 货到付款</a></li>
                    <li><a href="#"> 网上支付</a></li>
                    <li><a href="#"> 礼品卡支付</a></li>
                    <li><a href="#"> 银行转帐</a></li>

                </ul>
                <ul class="fl">
                    <li class="title"><a href="#"> 订单服务</a></li>
                    <li><a href="#"> 订单配送查询</a></li>
                    <li><a href="#"> 订单状态说明</a></li>
                    <li><a href="#"> 自助取消订单</a></li>
                    <li><a href="#"> 自助修改订单</a></li>
                </ul>
                <ul class="fl">
                    <li class="title"><a href="#"> 退换货</a></li>
                    <li><a href="#"> 退换货政策</a></li>
                    <li><a href="#"> 自助申请退换货</a></li>
                    <li><a href="#"> 退换货进度查询</a></li>
                    <li><a href="#"> 退款方式和时间</a></li>
                </ul>
                <ul class="fl">
                    <li class="title"><a href="#"> 商家服务</a></li>
                    <li><a href="#"> 商家中心</a></li>
                    <li><a href="#"> 运营服务</a></li>
                    <li><a href="#"> 加入尾品汇</a></li>
                </ul>
                <a href="homePage.html" class="fr">
                    <img src="./imgs/logo_00.png" alt="">
                </a>
            </div>
            <div class="wrapper footBottom">
                <div class="fbText">
                    <p>
                        <a href="#">公司简介</a> |
                        <a href="#">Investor Relations</a> |
                        <a href="#">网站联盟</a> |
                        <a href="#"> 乐购招商 </a>|
                        <a href="#">机构销售 </a>|
                        <a href="#">手机乐购 </a>|
                        <a href="#">官方Blog </a>|
                        <a href="#">热词搜索</a>
                    </p>
                    <p>
                        Copyright (C) 乐购网 2004-2016, All Rights Reserved
                    </p>
                </div>
            </div>
        </footer>


        <script src="./lib/jquery.min.js"></script>
        <script type="text/javascript" src="./lib/magnifier.js"></script>
        <script type="text/javascript" src="./js/productDetails.js"></script>


</body>

</html>